Skip to main content

动态 import

在 H5 开发时，我们能够使用动态 import 语法实现异步加载等功能。但在小程序环境是不支持动态 import 的，因此 Taro 默认会把动态 import 语法转换为普通 require 语法。

感谢 @JiyuShao 同学贡献的插件 taro-dynamic-import-weapp，让我们能够在微信小程序环境中使用上动态 import。

小程序​

受小程序环境限制，默认不支持真正的动态 import。此时 babel-preset-taro 会启用 babel-plugin-dynamic-import-node 插件，把动态 import 语法转换为 require 语法。

微信小程序​

借助 @JiyuShao 同学贡献的插件 taro-dynamic-import-weapp 可以在微信小程序中使用真正的动态 import 功能，实现动态加载 JS 代码。

例如动态加载 React 组件：

pages.jsx

import { Suspense } from 'react'
import { View, Text } from '@tarojs/components'

export default const Index = () => {
  const DynamicComponent = React.lazy(
    () => import('../../dynamic-import/dynamic-component/index')
  )
  return (
    <View>
      <Suspense fallback={<Text>Loading...</Text>}>
        <DynamicComponent />
      </Suspense>
    </View>
  )
}

参考​